import { Row, Col, Form, Input, Select, Button, Image } from "antd";
import TextArea from "antd/lib/input/TextArea";
import React, { FC, useRef, useState } from "react";
import { useNavigate } from "react-router-dom";
import { baseURL } from "../../api/request";
import MyTitle from "../../components/Title";
import { roleList, xuekeList } from "../../utils";
import { ajax } from "./../../api/index";
import { UploadOutlined } from "@ant-design/icons";
import uinfo from "../../mobx/uinfo";

const { Option } = Select;
const AddBanji: FC<any> = ({}) => {
  const [form] = Form.useForm();
  const Navigate = useNavigate();
  const file: any = useRef();
  const [path, setPath] = useState<any>("");

  const onFinish = async (value: any) => {
    console.log(value);
    value.info = uinfo.userInfo;

    let { code, result } = await ajax.addbanji(value);

    if (code == 200) {
      Navigate("/main/jiaowu/list2");
    }
  };

  const onFinishFailed = () => {};

  const resetFields = () => {
    form.resetFields();
    setPath(null);
  };
  const todoUpload = () => {
    file.current.click();
  };
  const uploadFile = async () => {
    const filedata = file.current.files[0];
    const data = new FormData();
    data.append("file", filedata);

    let res = await ajax.uploadfile(data);
    if (res.code == 200) {
      setPath(res.path);
      form.setFieldsValue({ avatar: res.path });
    }
  };
  return (
    <div>
      <Row>
        <Col span={8}>
          <MyTitle text="班级新增" />
          <Form
            name="normal_login"
            className="myform"
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
            form={form}
            layout={"vertical"}
          >
            <Form.Item
              name="title"
              label="班级名称"
              rules={[{ required: true, message: "请输入正确班级名称" }]}
            >
              <Input placeholder="请输入班级名称" />
            </Form.Item>
            <Form.Item
              name="number"
              label="班级人数"
              rules={[{ required: true, message: "请输入正确班级人数" }]}
            >
              <Input placeholder="请输入班级人数" />
            </Form.Item>
            <Form.Item
              name="boss"
              label="班主任"
              rules={[{ required: true, message: "请输入正确班主任名称" }]}
            >
              <Input placeholder="请输入班主任名称" />
            </Form.Item>
            <Form.Item
              name="lable"
              label="班级所属学科"
              rules={[{ required: true, message: "请输入正确学科类别" }]}
            >
              <Select style={{ width: "100%" }}>
                {xuekeList.map((l, i) => (
                  <Option key={i} value={l.value}>
                    {l.label}{" "}
                  </Option>
                ))}
              </Select>
            </Form.Item>
            {/* <Form.Item
              name="lable"
              label="班主任"
              rules={[{ required: true, message: "请输入正确学科类别" }]}
            >
              <Select style={{ width: "100%" }}>
                {banzhurenList.map((l, i) => (
                  <Option key={i} value={l.values}>
                    {l.labels}{" "}
                  </Option>
                ))}
              </Select>
            </Form.Item> */}
            <Form.Item name="avatar" label="学科描述">
              {path && (
                <Image
                  src={path.replace(/public/, baseURL)}
                  style={{ width: 200, height: 120, marginTop: 20 }}
                />
              )}

              <input
                type="file"
                ref={file}
                onChange={uploadFile}
                style={{ display: "none" }}
              />

              <Button
                style={{ display: "block", marginTop: 15 }}
                onClick={todoUpload}
                icon={<UploadOutlined />}
              >
                上传班级图片描述
              </Button>
            </Form.Item>
            <Form.Item>
              <Row>
                <Col span={11}>
                  <Button
                    type="primary"
                    style={{ width: "100%" }}
                    htmlType="submit"
                  >
                    添加班级
                  </Button>
                </Col>
                <Col span={11} offset={1}>
                  <Button
                    danger
                    style={{ width: "100%" }}
                    onClick={resetFields}
                  >
                    重置
                  </Button>
                </Col>
              </Row>
            </Form.Item>
          </Form>
        </Col>
      </Row>
    </div>
  );
};

export default AddBanji;
